<template>
  <div class="user-profile-container">

    <!-- 主要内容区域 -->
    <div class="content-wrapper">
      <!-- 左侧信息预览 -->
      <div class="profile-preview">
        <div class="avatar-container">
          <div class="avatar-placeholder">
            <i class="el-icon-user"></i>
          </div>
          <div class="avatar-edit-btn">
            <i class="el-icon-edit"></i>
          </div>
        </div>
        
        <div class="user-info">
          <h3 class="username">{{ form.username }}</h3>
          <p class="user-role">用户id：{{ form.id }}</p>
          <p class="user-role">角色：{{ form.role }}</p>
          <p class="user-status">状态：{{ form.state == '1' ? '正常' : '禁用' }}</p>
        </div>
      </div>
      
      <!-- 右侧信息编辑 -->
      <div class="profile-form">
        <div class="form-header">
          <h2 class="form-title">基本资料</h2>
        </div>
        
        <el-form 
          :model="form" 
          :rules="rules" 
          ref="formRef" 
          label-width="120px"
          class="custom-form"
        >
          <el-form-item label="用户头像" prop="avatar">
            <div class="avatar-upload">
              <div class="upload-placeholder">
                <i class="el-icon-upload"></i>
                <p>点击上传头像</p>
              </div>
            </div>
          </el-form-item>
            <el-form-item label="用户id" prop="username">
            <el-input v-model="form.id" disabled class="custom-input"></el-input>
          </el-form-item>
          <el-form-item label="用户账号" prop="id">
            <el-input v-model="form.username" class="custom-input"></el-input>
          </el-form-item>
        
            <el-form-item label="用户邮箱" prop="email">
            <el-input v-model="form.email" class="custom-input"></el-input>
          </el-form-item>
          
          <el-form-item label="角色" prop="role">
            <el-input v-model="form.role" disabled class="custom-input"></el-input>
          </el-form-item>
          

          
          <el-form-item class="form-actions">
            <el-button type="primary" @click="submitForm" class="custom-button">
              <i class="el-icon-check"></i> 保存
            </el-button>
            <el-button @click="resetForm" class="custom-button">
              <i class="el-icon-close"></i> 取消
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox, ElForm, ElFormItem, ElInput } from 'element-plus';
import axios from 'axios';

// 表单数据
const formRef = ref(null);
const form = reactive({
  id: localStorage.getItem('userId'),
  username: '',
  nickname: '',
  email: '',
  phone: '',
  remarks: '',
  avatar: '',
  role: '',
  state: '1'
});

// 创建时间
const createTime = ref('');

// 表单验证规则
const rules = reactive({
  nickname: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1\d{10}$/, message: '请输入正确的手机号码格式', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }
  ]
});

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const response = await axios.post(`http://localhost:8080/api/v1/users/GetUserInfo/${form.id}`);
    if (response.data.code === 200) {
      const userData = response.data.data;
      form.username = userData.username;
      form.nickname = userData.nickname;
      form.email = userData.email;
      form.role = userData.role || '普通用户';
      form.state = userData.state.toString() || '1';
      createTime.value = userData.createTime || new Date().toLocaleString();
    } else {
      ElMessage.error(response.data.message || '获取用户信息失败');
    }
  } catch (error) {
    ElMessage.error('网络错误，请稍后重试');
    console.error('获取用户信息错误:', error);
  }
};

// 提交表单
const submitForm = async () => {
  await formRef.value.validate();

  ElMessageBox.confirm(
    '确定要更新个人信息吗？', 
    '提示', 
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      const response = await axios.post('/api/v1/users/edit', {
        id: form.id,
        username: form.username,
        nickname: form.nickname,
        email: form.email,
        phone: form.phone,
        remark: form.remark,
        avatar: form.avatar
      });

      if (response.data.code === 200) {
        ElMessage.success('更新成功');
        await fetchUserInfo(); // 刷新数据
      } else {
        ElMessage.error(response.data.message || '更新失败');
      }
    } catch (error) {
      ElMessage.error('网络错误，请稍后重试');
      console.error('更新用户信息错误:', error);
    }
  }).catch(() => {
    // 取消操作
  });
};

// 重置表单
const resetForm = () => {
  formRef.value.resetFields();
  fetchUserInfo();
};

// 组件挂载后获取用户信息
onMounted(() => {
  fetchUserInfo();
});
</script>

<style scoped lang="less">
@primary-color: #409eff;
@border-color: #e4e7ed;
@text-color: #303133;
@placeholder-color: #c0c4cc;
@bg-color: #f5f7fa;
@form-item-margin: 24px;

.user-profile-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  
  .page-header {
    margin-bottom: 32px;
    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: @text-color;
      margin-bottom: 8px;
    }
    .page-subtitle {
      font-size: 14px;
      color: #606266;
    }
  }
  
  .content-wrapper {
    display: flex;
    gap: 32px;
    
    .profile-preview {
      flex: 1;
      max-width: 300px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
      padding: 24px;
      text-align: center;
      
      .avatar-container {
        position: relative;
        width: 120px;
        height: 120px;
        margin: 0 auto 24px;
        
        .avatar-placeholder {
          width: 100%;
          height: 100%;
          background-color: @bg-color;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 48px;
          color: @placeholder-color;
        }
        
        .avatar-edit-btn {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 32px;
          height: 32px;
          background-color: @primary-color;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          cursor: pointer;
          transition: all 0.2s;
          
          &:hover {
            background-color: #66b1ff;
          }
        }
      }
      
      .user-info {
        text-align: left;
        
        .username {
    font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #409eff;
    text-shadow: 1px 2px 8px #b3d8ff;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }
        
        .user-role, .user-status, .create-time {
          font-size: 14px;
          color: #606266;
          margin-bottom: 10px;
          line-height: 1.6;
        }
      }
    }
    
    .profile-form {
      flex: 3;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
      padding: 24px;
      
      .form-header {
        margin-bottom: 24px;
        
        .form-title {
          font-size: 20px;
          font-weight: 500;
          color: @text-color;
          padding-bottom: 12px;
          border-bottom: 1px solid @border-color;
        }
      }
      
      .custom-form {
        .el-form-item {
          margin-bottom: @form-item-margin;
          
          .el-form-item__label {
            font-size: 14px;
            color: #606266;
            padding-right: 12px;
            line-height: 40px;
          }
          
          .el-form-item__content {
            line-height: 40px;
          }
        }
        
        .avatar-upload {
          .upload-placeholder {
            width: 100px;
            height: 100px;
            background-color: @bg-color;
            border-radius: 4px;
            border: 1px dashed @border-color;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            
            i {
              font-size: 24px;
              color: @placeholder-color;
              margin-bottom: 4px;
            }
            
            p {
              font-size: 12px;
              color: @placeholder-color;
              line-height: 1.4;
              margin: 0;
            }
            
            &:hover {
              border-color: @primary-color;
              
              i, p {
                color: @primary-color;
              }
            }
          }
        }
        
        .custom-input {
          .el-input__inner {
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            padding: 0 12px;
          }
          
          .el-textarea__inner {
            font-size: 14px;
            padding: 8px 12px;
          }
        }
        
        .form-actions {
          padding-top: 12px;
          margin-top: @form-item-margin;
          border-top: 1px solid @border-color;
          display: flex;
          gap: 16px;
          
          .custom-button {
            padding: 12px 20px;
            font-size: 14px;
            
            i {
              margin-right: 8px;
            }
          }
        }
      }
    }
  }
}

/* 适配移动端 */
@media (max-width: 768px) {
  .user-profile-container {
    padding: 16px;
  }
  
  .content-wrapper {
    flex-direction: column;
    
    .profile-preview {
      max-width: 100%;
      margin-bottom: 24px;
    }
  }
}
</style>
